<nz-modal
    [(nzVisible)]="isVisible"
    [nzTitle]="modalTitle"
    [nzContent]="modalContent"
    [nzFooter]="modalFooter"
    [nzWidth]="'460px'"
    (nzOnCancel)="handleCancel()"
    [nzMaskClosable]="false"
>
    <ng-template #modalTitle>
        <!--{{layerType}}-->
        符号选择器
    </ng-template>

    <ng-template #modalContent>
        <div class="sing-selector-container">
            <div class="sign-list-wrapper">
                <div class="search-box">
                    <input type="text" nz-input style="width:200px;">
                    <button class="search-button" nz-button nzType="primary"><i nz-icon nzType="search"
                                                                                nzTheme="outline"></i></button>
                </div>
                <div class="sign-list">
                    <ng-container *ngFor="let signInfo of curSigns">
                        <div class="sign-item" (click)="setSelSign(signInfo, svgItem)">
                            <img [src]="signInfo.src" width="20px" height="20px" alt="">
                            <embed #svgItem type="image/svg+xml" [src]="signInfo.src" width="0" height="0"/>
                            <!--<object #svgItem type="image/svg+xml" [data]="signInfo.src" width="20px" height="20px"></object>>-->
                            <div class="sing-name">{{signInfo.name}}</div>
                        </div>
                    </ng-container>
                </div>
            </div>
            <div class="setting-section">
                <div class="crt-sign-line  line">
                    <span>当前符号：</span>
                    <div class="crt-sign right">
                        <embed #crtSVGEmbed type="image/svg+xml" (load)="onload($event)" [src]="selSign.src"
                               width="20px" height="20px"/>
                        <div class="sing-name">{{selSign.name}}</div>
                    </div>
                </div>
                <div class="color-selector-line  line"  *ngIf="!(layerType === 'polygon')">
                    <span>颜色：</span>
                    <input type="color" class="right" [(ngModel)]="selColor" (ngModelChange)="setCrtSignColor()">
                </div>
                <div class="color-selector-line  line"  *ngIf="layerType === 'polygon' && selSign.key !== 'blank-fill'">
                    <span>{{selSign.key.indexOf('-fill') === -1? '线条' : '填充'}}颜色：</span>
                    <input type="color" class="right" [(ngModel)]="selContentColor" (ngModelChange)="setSelContentColor()">
                </div>
                <div class="size-set-line line" *ngIf="layerType === 'point'">
                    <span>大小：</span>
                    <nz-input-number class="right" [(ngModel)]="crtSize" [nzMin]="1" [nzMax]="20" [nzStep]="1"
                                     (ngModelChange)="setCrtSignSize()"></nz-input-number>
                </div>
                <div class="rotation-set-line line" *ngIf="layerType === 'point'">
                    <span>倾斜：</span>
                    <nz-input-number class="right" [(ngModel)]="crtRotation" [nzMin]="-180" [nzMax]="180" [nzStep]="1"
                                     (ngModelChange)="setCrtSignRotation()"></nz-input-number>
                </div>
                <div class="width-set-line line" *ngIf="layerType === 'line'">
                    <span>宽度：</span>
                    <nz-input-number class="right" [(ngModel)]="crtWidth" [nzMin]="1" [nzMax]="10" [nzStep]="0.1"
                                     (ngModelChange)="setCrtSignWidth()"></nz-input-number>
                </div>
                <div class="line" *ngIf="layerType === 'polygon'">
                    <span>轮廓宽度：</span>
                    <nz-input-number class="right" [(ngModel)]="crtStrokeWidth" [nzMin]="1" [nzMax]="10" [nzStep]="0.1"
                                     (ngModelChange)="setCrtStrokeWidth()"></nz-input-number>
                </div>
                <div class="line" *ngIf="layerType === 'polygon'">
                    <span>轮廓颜色：</span>
                    <input type="color" class="right" [(ngModel)]="selOutLineColor" (ngModelChange)="setCrtSignOutLineColor()">
                </div>
                <div class="opacity-set-line line" *ngIf="layerType === 'polygon'">
                    <span>透明度：</span>
                    <nz-input-number class="right" [(ngModel)]="crtOpacity" [nzMin]="0" [nzMax]="1" [nzStep]="0.1"
                                     (ngModelChange)="setCrtOpacityWidth()"></nz-input-number>
                </div>
            </div>
        </div>
    </ng-template>

    <ng-template #modalFooter>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
        <!--<button nz-button nzType="default" (click)="checkSql()">验证</button>-->
        <button nz-button nzType="default" (click)="applySign()" [nzLoading]="applyLoading">确定</button>
    </ng-template>
</nz-modal>

<div id="sign-selector-hidden">

</div>
